/**
 * 初始化
 */
let selectedDateHeatmapData;
let heatmap;

let amap = new AMap.Map('map', {
    mapStyle: 'amap://styles/9675b9577d57cfbdf081643627e3b2c1',
});

amap.plugin(["AMap.Heatmap"], () => {
    heatmap = new AMap.Heatmap(amap, {
        radius: 20, //给定半径
        opacity: [0, 0.6],
        gradient: {
            0.1: '#50a3ba',
            0.3: '#006EFF',
            0.5: '#6400FF',
            0.7: '#eac736',
            0.9: '#d94e5d',
            1.0: '#FF0000'
        }
    });
    ajax_heatmap();
});

amap.on('complete', function () {
    axios.get(GET_getCityById).then(resp => {
        resp = resp.data.data;

      /*  document.querySelector('.header_center').innerText = resp.title;*/
        amap.setZoomAndCenter(resp.zoomLevel, [resp.longt, resp.lat]);
    });
});

new Vue({
    el: '#date',
    data: {
        date: ''
    },
    watch: {
        date() {
            let formattedDate = dayjs(this.date).format('YYYYMMDD');

            ajax_heatmap(formattedDate);

            vm_taday_bg.init(formattedDate);
        }
    }
});

let option = {
    baseOption: {
        timeline: {
            //loop: false,
            axisType: 'category',
            show: true,
            autoPlay: true,
            playInterval: 5000,
            //lineStyle: {color: '#99FFFF'},
            bottom: '3%',
            left: '25%',
            right: '25%',
            padding: 7,
            symbolSize: 11,
            controlStyle: {
                borderColor: '#087cf4',
                color: '#087cf4',
                itemSize: 35,
            },
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#77baff' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#77baff' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                },
                borderColor: '#77baff',
                borderWidth: 3,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                shadowBlur: 10
            },
            checkpointStyle: {
                color: '#01fe53',
                borderColor: '#0e7041',
                symbolSize: 16,
            },
            lineStyle: {
                width: 4,
                color: "#0684d9"
            },
            label: {
                color: '#fff',
                position: "auto",
                lineHeight: 56,
                textStyle: {
                    fontSize: 12,
                    top: 22,
                }
            },
            data: ['0点', '2点', '4点', '6点', '8点', '10点', '12点', '14点', '16点', '18点', '20点', '22点']
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}'
        },
    },
};
let echartsObj = echarts.init(document.getElementById("allmap"));
echartsObj.setOption(option);

async function ajax_heatmap(date = '') {
    selectedDateHeatmapData = {};
    heatmap.setDataSet({data: []});
    let respData = (await axios.get(GET_heatmap, {
        params: {date: date}
    })).data;
    if (respData.code == 200) {
        selectedDateHeatmapData = respData.data;

        echartsObj.on('timelinechanged', event => {
            let curHour = event.currentIndex * 2;
            drawHeatmapByHour(curHour);
        });
    }
}

function drawHeatmapByHour(curHour) {
    if (Object.keys(selectedDateHeatmapData).length === 0) return;
    let curHourData = selectedDateHeatmapData[curHour];
    heatmap.setDataSet({
        data: curHourData
    });
}